// px转换为rem
@function pxToRem($px, $base: 750px) {
    $min: 1 / $base * 10 * 1;
    $result: $px / $base * 10 * 1;

    @if $result < 0.027 and $result > 0 {
        @return 2px;
    }

    @else {
        @return $px / $base * 10 * 1rem;
    }

}

// 设置dpr下的字体大小
@mixin font-dpr($font-size, $line-height: $font-size) {
    font-size: $font-size / 2;

    @if $line-height != none {
        line-height: $line-height / 2;
    }

    [data-dpr="2"] & {
        font-size: $font-size;

        @if $line-height != none {
            line-height: $line-height;
        }
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3 / 2;

        @if $line-height != none {
            line-height: $line-height * 3 / 2;
        }
    }
}

@font-face {
    font-family: 'PingFang Regular';
    src: url('../font/enroll/PingFang Regular.eot');
    src:
      url('../font/enroll/PingFang Regular.eot?#font-spider') format('embedded-opentype'),
      url('../font/enroll/PingFang Regular.woff') format('woff'),
      url('../font/enroll/PingFang Regular.ttf') format('truetype'),
      url('../font/enroll/PingFang Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.rule-container{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    overflow: scroll;
    font-family: 'PingFang Regular';

    .content{
        width: pxToRem(678px);
        height: pxToRem(1346px);
        background-image: url('../images/rule/ruleBackground.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        padding: pxToRem(50px) 0;
        margin: pxToRem(50px) auto;

        .content-close{
            width: pxToRem(38px);
            height: pxToRem(38px);
            display: block;
            margin: pxToRem(210px) 0 0 pxToRem(586px);
        }

        .content-title{
            margin: pxToRem(70px) auto pxToRem(40px);
            @include font-dpr(42px);
            font-weight: bold;
            color: #1acbfd;
            text-align: center;
        }

        .content-detail{
            width: pxToRem(640px);
            height: pxToRem(900px);
            overflow: scroll;
            margin: 0 auto;
        }

        .content-block{
            width: pxToRem(560px);
            text-align: left;
            margin: 0 auto pxToRem(24px);
        }

        .content-subtitle{
            @include font-dpr(28px,48px);
            color: #1acbfd;
            margin: 0;
        }

        .content-item{
            width: 100%;
            margin-bottom: pxToRem(50px);
            display: flex;

            &:last-child{
                margin-bottom: 0;
            }
        }

        .content-number{
            width: pxToRem(34px);
            height: pxToRem(37px);
            text-align: center;
            @include font-dpr(28px,37px);
            color: #ffffff;
            background-image: url('../images/rule/numberDot.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-right: pxToRem(10px);
        }

        .content-word{
            @include font-dpr(28px,48px);
            color: #333333;
            margin: 0;
            width: pxToRem(520px);
        }
    }
    .cheerRule-content{
        width: pxToRem(678px);
        height: pxToRem(917px);
        background-image: url('../images/rule/cheerRuleBackground.png');
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        .content-title{
            margin: pxToRem(70px) auto pxToRem(40px);
        }
        .content-close-cheer{
            width: pxToRem(38px);
            height: pxToRem(38px);
            display: block;
            margin: pxToRem(160px) 0 0 pxToRem(586px);
        }
        .content-word{
            margin-top: pxToRem(10px);
            width: pxToRem(590px);
            @include font-dpr(28px,42px);
        }
    }
}